<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="department_manager">
        <div class="title">部门架构</div>
        <!-- 2020-02-21 start -->
        <div class="btn_wrapper">
            <div class="normal_btn add_department_btn">添加部门</div>
            <div class="normal_btn edit_department_btn">修改部门名称</div>
            <div class="normal_btn delete_department_btn">删除部门</div>
        </div>
        <!-- 2020-02-21 end -->

        <div class="content">
            <div class="protree_normal department_list"></div>
        </div>
    </div>

    <!-- 添加部门Modal -->
    <div class="modal fade normal_modal" id="addDepartmentModal" tabindex="-1" role="dialog"
        aria-labelledby="addDepartmentModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="addDepartmentModalLabel">添加部门</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">部门名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="add_department_name" required lay-verify="required"
                                    placeholder="请输入部门名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属部门</label>
                            <div class="layui-input-block select_dep_layui_block">
                                <div class="select_dep_div">选择所属部门</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn danger-bg" lay-submit
                            lay-filter="addDepartmentSubmit">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 2020-02-21 start -->
    <!-- 修改部门Modal -->
    <div class="modal fade normal_modal" id="editDepartmentModal" tabindex="-1" role="dialog"
        aria-labelledby="editDepartmentModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="editDepartmentModalLabel">修改部门名称</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属部门</label>
                            <div class="layui-input-block select_dep_layui_block">
                                <div class="select_dep_div">选择部门</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">修改名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="edit_department_name" required lay-verify="required"
                                    placeholder="请输入修改名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn danger-bg" lay-submit
                            lay-filter="editDepartmentSubmit">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 删除部门Modal -->
    <div class="modal fade normal_modal" id="deleteDepartmentModal" tabindex="-1" role="dialog"
        aria-labelledby="deleteDepartmentModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="deleteDepartmentModalLabel">删除部门</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属部门</label>
                            <div class="layui-input-block select_dep_layui_block">
                                <div class="select_dep_div">选择部门</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn danger-bg" lay-submit
                            lay-filter="deleteDepartmentSubmit">删除</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 选择部门模态框 -->
    <div class="modal fade normal_modal" id="organizational_modal" tabindex="-1" role="dialog"
        aria-labelledby="organizational_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="organizational_modal_label">选择部门</h4>
                </div>
                <div class="modal-body">
                    <div class="select_person_wrapper">
                        <div class="left_wrapper">
                            <div class="protree_container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 选择部门模态框 -->
    <!-- 2020-02-21 end -->

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.js"></script>
    <script src="../../js/proTree.js"></script>
    <script>
        //后台传入的 标题列表
        var arr = [
            {
                id: 1,
                name: "长沙峰之道",
                pid: 2,
                department: true,
                Useful: true
            },
            {
                id: 2,
                name: "长沙沃邦",
                pid: 0,
                department: true,
                Useful: true
            },
            {
                id: 3,
                name: '君臣国度',
                pid: 2,
                department: true,
                Useful: true
            }
        ];
        layui.use('form', function () {
            var form = layui.form
            layui.use('layer', function () {
                var layer = layui.layer
                var selectedDepId = "" // 已选择的部门
                //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
                $(".department_list").ProTree({
                    arr: arr,
                    close: false,
                    simIcon: "iconfont icon-wenjianjia", //单个标题字体图标 不传默认glyphicon-file
                    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
                    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
                });

                // 2020-02-21 start
                // 点击添加部门 打开modal
                $(".add_department_btn").click(function () {
                    selectedDepId = ""
                    $("input[name=add_department_name]").val('')
                    $(".select_dep_div").text("选择所属部门") // 将选择的部门名字赋值
                    $(".select_dep_div").attr('data-id', "") // 将选择的部门ID赋值
                    $("#addDepartmentModal").modal('show')
                })
                // 2020-02-21 end

                $(".select_dep_div").click(function () {
                    $("#organizational_modal").modal('show')
                })

                // 添加部门protree
                $(".protree_container").ProTree({
                    arr: arr,
                    close: false,
                    simIcon: "iconfont icon-wenjianjia", //单个标题字体图标 不传默认glyphicon-file
                    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
                    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
                    callback: function (id, name, pid, department, useful) {
                        console.log(arr)
                        if (useful) {
                            selectedDepId = id // 将选择的部门id赋值
                            $(".select_dep_div").text(name) // 将选择的部门名字赋值
                            $(".select_dep_div").attr('data-id', id) // 将选择的部门ID赋值
                            $("#organizational_modal").modal('hide')
                        }
                    }
                });

                // 确认添加
                form.on('submit(addDepartmentSubmit)', function (data) {
                    let add_dep_name = data.field.add_department_name // 添加的部门名称
                    console.log(add_dep_name, selectedDepId)
                    if (selectedDepId == '') {
                        layer.msg('所属部门不能为空')
                        return false
                    }
                    $("#addDepartmentModal").modal('hide')
                })

                // 2020-02-21 start
                // 点击修改部门名称 打开modal
                $(".edit_department_btn").click(function () {
                    selectedDepId = ""
                    $("input[name=edit_department_name]").val('')
                    $(".select_dep_div").text("选择部门") // 将选择的部门名字赋值
                    $(".select_dep_div").attr('data-id', "") // 将选择的部门ID赋值
                    $("#editDepartmentModal").modal('show')
                })
                // 确认修改
                form.on('submit(editDepartmentSubmit)', function (data) {
                    let edit_dep_name = data.field.edit_department_name // 修改的部门名称
                    console.log(edit_dep_name, selectedDepId)
                    if (selectedDepId == '') {
                        layer.msg('所属部门不能为空')
                        return false
                    }
                    // 执行修改ajax
                    $("#editDepartmentModal").modal('hide')
                })
                // 点击删除部门 打开modal
                $(".delete_department_btn").click(function () {
                    selectedDepId = ""
                    $(".select_dep_div").text("选择部门") // 将选择的部门名字赋值
                    $(".select_dep_div").attr('data-id', "") // 将选择的部门ID赋值
                    $("#deleteDepartmentModal").modal('show')
                })
                // 确认删除
                form.on('submit(deleteDepartmentSubmit)', function (data) {
                    console.log(selectedDepId)
                    if (selectedDepId == '') {
                        layer.msg('所属部门不能为空')
                        return false
                    }
                    // 执行删除ajax
                    $("#deleteDepartmentModal").modal('hide')
                })
                // 2020-02-21 end
            })
        })
    </script>
</body>

</html>